<template>
	<div>
		<games-content type="slots" />
		<div class="w-full">
			<div class="max-w-[1296px] mx-auto">
				<div class="h-group-t"></div>
				<recommend-vue type="slots" />
				<!-- <slots-card type="slots" /> -->
				<div class="h-group-t"></div>
				<supplier-vue type="slots" />
				<div class="h-group-t"></div>
				<!-- <live-big-wins defaultTab="slots" /> -->
				<app-live-rank type="slots" />
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted } from 'vue'
// import LiveBigWins from '@/components/slots/live-big-win/index.vue'
import AppLiveRank from '@/components/app/app-live-rank/index.vue'
import RecommendVue from '@/components/slots/recommend/index.vue'
import SupplierVue from '@/components/slots/supplier/index.vue'
// import SlotsCard from '@/components/slots/slots-card/index.vue'
import GamesContent from '@/components/slots/games-content/index.vue'

onMounted(() => {
	const app_content = document.getElementById('app_content')
	if (app_content) {
		app_content.setAttribute('games', 'true')
		// app_content.style.paddingTop = '0px'
		app_content.style.maxWidth = 'none'
	}
})

onUnmounted(() => {
	const app_content = document.getElementById('app_content')
	if (app_content) {
		app_content.removeAttribute('games')
		// app_content.style.paddingTop = '20px'
		app_content.style.maxWidth = '1390px'
	}
})
</script>
